<script setup lang='ts'>
import { showSuccessToast } from "vant";
import { onMounted, ref, watch } from "vue"
import { useRouter } from "vue-router";
import { showConfirmDialog } from 'vant';
import { useCounterStore } from "@/stores/counter";
const store = useCounterStore()
const $router = useRouter()
const userInfo = ref<any>(JSON.parse(`${localStorage.getItem('userInfo')}`))
const quitLogin = () => {
    showConfirmDialog({
        title: '退出',
        message:
            '是否退出登录！',
    })
        .then(() => {
            localStorage.setItem('userInfo', '')
            store.getUserInfo(null)
            showSuccessToast('退出成功！')
            setTimeout(() => {
                $router.push('/my')
            }, 1000)
        })
        .catch(() => {
        });

}
const nickName = ref<string>('')
const uploadAvatar = () => {
}
const img = ref<any>('')
const afterRead = (file: any) => {

    userInfo.value.avatar = file.content
    showSuccessToast('修改成功！')
};

const columns = [
    { text: '保密', value: 'unknow' },
    { text: '男', value: 'nan' },
    { text: '女', value: 'nv' },
];
const showPicker = ref<boolean>(false)

const updateGender = (check: any) => {
    let gender = columns.filter((o: any) => o.value == check.selectedValues[0])[0].text
    userInfo.value.gender = gender
    showSuccessToast('修改成功！')
    showPicker.value = false
};

watch(userInfo.value, (userInfo, prevUserInfo) => {
    localStorage.setItem('userInfo', `${JSON.stringify(userInfo)}`)
})

const input = ref<any>(null)
onMounted(() => {

    nickName.value = userInfo.value.nickName

})
const isUpdateNickName = ref<boolean>(false)
const confirmUpdateNickName = () => {
    if (nickName.value != '') {
        userInfo.value.nickName = nickName.value
        showSuccessToast('修改成功！')
    }

    isUpdateNickName.value = false
}
</script>

<template>
    <div class="info">
        <div class="info-title">
            <img src="@/assets/imgs/返回1.png" alt="" @click="$router.back()">
            <span>个人信息</span>
            <span></span>
        </div>
        <div class="info-content">
            <div class="avatar">
                <span>头像</span>
                <div class="avatar-right">
                    <img :src="userInfo.avatar" alt="">
                    <van-uploader :after-read="afterRead">
                        <img src="@/assets/imgs/向右1.png" alt="" @click="uploadAvatar" class="to-update-avatar">
                    </van-uploader>
                </div>
            </div>
            <div class="nick">
                <span>昵称</span>
                <div class="nick-right" @click="isUpdateNickName = true; input?.focus()">
                    <span v-if="!isUpdateNickName">{{ userInfo.nickName }}</span>
                    <input type="text" ref="input" v-if="isUpdateNickName" v-model="nickName"
                        @blur="confirmUpdateNickName">
                    <img src="@/assets/imgs/向右1.png" alt="">
                </div>
            </div>
            <div class="gender">
                <span>性别</span>
                <div class="gender-right" @click="showPicker = true">
                    <span>{{ userInfo.gender }}</span>
                    <img src="@/assets/imgs/向右1.png" alt="">
                </div>

            </div>
            <van-popup v-model:show="showPicker" round position="bottom">
                <van-picker :columns="columns" @cancel="showPicker = false" @confirm="updateGender" />
            </van-popup>
            <div class="quit-login" @click="quitLogin">
                <span>退出登录</span>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.info {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;

    .info-title {
        display: flex;
        height: 50rem;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;

        img {
            width: 30rem;
            height: 30rem;
        }

        span {
            font-size: 17rem;
            color: #333;
        }
    }

    .info-content {
        width: 100%;
        height: calc(100vh - 50rem);
        // padding: 0 10rem;
        box-sizing: border-box;


        .avatar {
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding: 10rem 10rem;

            span {
                font-size: 16rem;
                color: #333;
            }

            .avatar-right {
                flex-grow: 1;
                display: flex;
                justify-content: right;
                align-items: center;

                img {
                    width: 60rem;
                    height: 60rem;
                    border-radius: 50%;

                    &.to-update-avatar {
                        width: 25rem;
                        height: 25rem;
                        margin-left: 10rem;
                    }
                }
            }
        }

        .gender,
        .nick {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10rem;
            border-bottom: 1px solid #eee;

            span {
                font-size: 17rem;
                color: #333;
            }

            .gender-right,
            .nick-right {
                display: flex;

                img {
                    width: 25rem;
                    height: 25rem;
                    margin-left: 10rem;
                }

                input {
                    border: none;
                }
            }
        }

        .quit-login {
            width: 80%;
            height: 50rem;
            border-radius: 25rem;
            border: 1rem solid #fc1c1c;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 200rem;
            margin-left: 10vw;

            span {
                font-size: 17rem;
                color: #333;
            }
        }
    }
}
</style>
